<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="../../topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="../../static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="../../static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <!-- jQuery相关引用 -->
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.cookie.js"></script>
    <!-- TopJUI框架配置 -->
    <script type="text/javascript" src="../../static/public/js/topjui.config.js"></script>
    <!-- TopJUI框架核心-->
    <script type="text/javascript" src="../../topjui/js/topjui.core.min.js"></script>
    <!-- TopJUI中文支持 -->
    <script type="text/javascript" src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="../../static/plugins/layui/layui.js" charset="utf-8"></script>
    <!-- zTree样式及核心 -->
    <link rel="stylesheet" href="../../static/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../static/plugins/zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            async: {
                enable: true,
                url: "../../json/datagrid/ztree.json",
                autoParam: ["id", "name=n", "level=lv"],
                otherParam: {"otherParam": "zTreeAsyncTest"}
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj(treeId);
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        var content = '<iframe src="' + treeNode.file + '.html" scrolling="auto" frameborder="0" style="width:100%;height:99.6%;"></iframe>';
                        $('#content').iPanel({
                            fit: true,
                            border: false,
                            content: content
                        });
                        return true;
                    }
                },
                onClick: function (event, treeId, treeNode) {
                    //$.iMessager.alert('节点信息', '节点标识：' + treeNode.id + "<br>节点名称：" + treeNode.name, 'messager-info');
                }
            }
        };

        $(function () {
            $("#ztree1").iZtree({
                setting: setting
            });

            var content = '<iframe src="/static/plugins/zTree/demo/cn/core/standardData.html" scrolling="auto" frameborder="0" style="width:100%;height:99.6%;"></iframe>';
            $('#content').iPanel({
                fit: true,
                border: false,
                content: content
            });
        });
    </script>
</head>

<body>
<div data-toggle="topjui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'',split:true,border:false,width:'20%',iconCls:'fa fa-sitemap',headerCls:'border_right',bodyCls:'border_right'">
        <!--通过API接口调用zTree-->
        <ul id="ztree1" class="ztree"></ul>

        <!--通过HTML标签调用zTree-->
        <ul class="ztree" data-toggle="topjui-ztree" data-options="id:'ztree2',setting:setting"></ul>
    </div>
    <div data-options="region:'center',split:true,border:false,bodyCls:'border_left'">
        <div id="content"></div>
    </div>
</div>
</body>
</html>